<template>
  <view class="address-container">
    <!-- 头部标题和新建按钮 -->
    <view class="address-header">
      <view class="header-title">管理收货地址</view>
      <view class="new-address" @click="navigateToNewAddress">新建</view>
    </view>

    <!-- 地址列表 -->
    <view class="address-list">
      <view
        v-for="(item, index) in address"
        :key="index"
        class="address-item"
        @click="selectAddress(item)"
      >
        <view class="address-info">
          <view class="user-info">
            <text class="user-name">{{ item.name }}</text>
            <text class="user-phone">{{ item.phone }}</text>
          </view>
          <view class="address-detail">
            {{ item.city }}{{ item.department }}{{ item.houseNumber }}
          </view>
        </view>
        <view class="address-actions">
          <button class="action-btn" @click.stop="revise(item)">修改</button>
          <button class="action-btn" @click.stop="deleteAddress(item.id, index)">删除</button>
        </view>
      </view>
    </view>

    <!-- 无地址提示 -->
    <view v-if="address.length === 0" class="empty-address">
      <text>暂无收货地址，请添加</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: []
    };
  },
  onShow() {
    this.addressList(); // 页面加载时请求数据
  },
  methods: {
    // 获取地址列表
    addressList() {
      uni.showLoading({
        title: '加载中...'
      });
      uni.request({
        url: "http://localhost:3000/address",
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200) {
            this.address = res.data;
          } else {
            uni.showToast({
              title: '获取地址失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '网络错误，请重试',
            icon: 'none'
          });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
    
    // 跳转到新建地址页面
    navigateToNewAddress() {
      uni.navigateTo({
        url: "/pages/own/newaddress",
      });
    },
    
    // 选择地址
    selectAddress(address) {
      // 这里可以根据业务需求处理地址选择逻辑
      // 例如：选择后返回上一页并带回地址信息
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      if (prevPage && prevPage.selectAddress) {
        prevPage.selectAddress(address);
        uni.navigateBack();
      }
    },

    // 编辑地址
    revise(item) {
      uni.navigateTo({
        url: `/pages/own/revise?id=${item.id}`,
      });
    },

    // 删除地址
    deleteAddress(id, index) {
      uni.showModal({
        title: "提示",
        content: "确定要删除该收货地址吗？",
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '删除中...'
            });
            uni.request({
              url: `http://localhost:3000/address/${id}`,
              method: 'DELETE',
              success: (res) => {
                if (res.statusCode === 200) {
                  // 从列表中移除已删除的地址
                  this.address.splice(index, 1);
                  uni.showToast({
                    title: "删除成功",
                    icon: "success",
                    duration: 1500
                  });
                } else {
                  uni.showToast({
                    title: "删除失败",
                    icon: "none",
                    duration: 1500
                  });
                }
              },
              fail: (err) => {
                uni.showToast({
                  title: "网络错误，请重试",
                  icon: "none",
                  duration: 1500
                });
              },
              complete: () => {
                uni.hideLoading();
              }
            });
          }
        }
      });
    },
    selectAddress(address) {
      // 格式化地址数据
      const addressData = {
        details: `${address.city}${address.department}${address.houseNumber}`,
        name: address.name,
        phone: address.phone
      };
      
      // 获取当前页面实例
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      
      if (prevPage) {
        // 调用上一页的方法更新地址
        prevPage.$vm.selectedAddress = addressData;
        
        // 或者通过事件总线传递
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.emit('acceptAddress', addressData);
        
        // 保存到本地缓存
        uni.setStorageSync('selectedAddress', JSON.stringify(addressData));
      }
      
      // 返回上一页
      uni.navigateBack();
    },
  }
};
</script>

<style>
.address-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
}

.new-address {
  color: #1aad19;
  font-size: 16px;
}

.address-list {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.address-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.address-item:last-child {
  border-bottom: none;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.user-name {
  font-size: 20px;
  font-weight: bold;
  margin-right: 15px;
}

.user-phone {
  color: #666;
  font-size: 17px;
}

.address-detail {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  padding-right: 80px;
}

.address-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  position: absolute;
  right: 15px;
  bottom: 15px;
}

.action-btn {
  background-color: transparent;
  border: none;
  color: #1aad19;
  font-size: 14px;
  margin-left: 15px;
  cursor: pointer;
}

.action-btn:active {
  opacity: 0.8;
}

.empty-address {
  text-align: center;
  padding: 50px 0;
  color: #999;
}
</style>    